<template>
    <div id="Search">
        <img alt="" src="@/assets/img/Search.png"/>
        <input type="text" :placeholder="placeholder" @focus="pageJump" @keyup.enter="GlobalSearch" v-model="val"/>
        <!-- <button @click="GlobalSearch">搜索</button> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
              val:""
            }
        },
        props: ["placeholder","jump"],
        methods: {
            pageJump(){
                if (this.jump){
                    this.$router.push(this.jump)
                }
            },
            //键盘回车事件
            GlobalSearch(){
              this.$emit("GlobalSearch");
            }
        }
    }
</script>

<style scoped lang='less'>
    #Search {
        font-size: 28px;
        padding: 10px 32px;
        height: 70px;
        position: relative;
        background: #fff;
        img {
            width: 25px;
            height: 25px;
            margin: 23px 20px 22px;
            position: absolute;
        }

        input {
            background: #efefef;
            padding-left: 65px;
            width: 621px;
            height: 70px;
            border-radius: 10px;
            &::-webkit-input-placeholder {
                font-size:28px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(152,151,148,1);
            }

            &:-ms-input-placeholder {
                font-size:28px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(152,151,148,1);
            }
        }

        // button{
        //   margin-left: 10px;
        //   width: 100px;
        //   height: 70px;
        //   border-radius: 10px;
        //   background: #efefef;
        //   text-align: center;
        //   line-height: 70px;
        //   font-size: 28px;
        //   color:rgba(152,151,148,1);
        // }
    }
</style>
